<template>
  <el-select  filterable
              remote
              reserve-keyword
              remote-show-suffix
              :remote-method="getDicData"
              :loading="loading"
              fit-input-width
              ref="customizeSelect" :multiple="isMultiple" :size="inputSize"  v-for="(pV,key) in getProperty(property)"
              :[key]="pV" v-model="reValue" :field="name" @input="$forceUpdate()" :placeholder="placeholder" @change="handleChange" >
    <el-option v-for="(option,index) in rOptions"  :label="option.text" :value="option.value" @input="$forceUpdate()"></el-option>
  </el-select>
</template>
<script setup lang="ts">

import {inject, nextTick, reactive, ref, toRaw, watchEffect} from "vue";
import {ElMessage} from "element-plus";
import service from "@/utils/request.ts";
import { TOKEN_NAME_KEY, TOKEN_VALUE_KEY} from "@/constant/constant.ts";
import {type ICustomizeSelect} from "@/components/plugs/form/DialogFormInterface";

const  tokenName = localStorage.getItem(TOKEN_NAME_KEY);
const  tokenValue = localStorage.getItem(TOKEN_VALUE_KEY);
const emits = defineEmits(["customizeChange"]);

const props = withDefaults(defineProps<ICustomizeSelect>(),{
  inputSize: 'default',
  placeholder: "",
  defaultValue: "1",
  isMultiple: false,
  selectedChange:(value:any) => {}
});
let timeout!:number;
const loading = ref(false);
const {defaultValue,selectedChange,textFiled,valueField,url,name,placeholder} = props;
const oldValue = defaultValue;
const reValue:any = ref(defaultValue);
const customizeSelect:any = ref(null);
const rOptions:any = reactive([]);
let resource:[] = [];

const getProperty = (property:any) =>{
  return (property == undefined || property == null) ? {"key":"value"} : property;
}

const handleChange = () =>{
  let selectedData;
  for(const item of resource){
    if(item[<string>valueField] == reValue.value){
      selectedData = item;
      break;
    }
  }
  emits("customizeChange",name,reValue.value);
  selectedChange(selectedData);
}

const getDicData = function (query:string){
  loading.value = true;
  if(timeout){
    clearTimeout(timeout);
  }
  let params:{[key: string] : any} = {};
  params[<string>textFiled] = query;
  rOptions.clear();
  service.post(<string>url,params).then(
      (respone:any) => {
        const dicData = respone.data.data;
        resource = dicData;
        for(const item of dicData){
          rOptions.push({
            "text": item[<string>textFiled],
            "value": item[<string>valueField]
          });
        }
        loading.value = false;
      }).catch((error:any) => {
    ElMessage.error("请求远程下拉数据失败!：" + error);
  }).finally(() => {
  });
}

getDicData('');

const resetFields = () =>{
  reValue.value = oldValue;
}

const setData = (value:any) =>{
  if(value == undefined){
    return;
  }
  nextTick(() => {
    if(typeof value === 'number'){
      value = value + '';
    }
    reValue.value = value;
  });
}

const getField = () =>{
  return name;
}

const getData = () => {
  return reValue.value;
}

defineExpose({resetFields,setData,getField,getData});

</script>

<style scoped>

</style>